<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: utils/util.js</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: utils/util.js</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>import {parse} from './style'
import * as Sphere from 'ol/sphere'
import * as Extent from 'ol/extent'

const BASE_TYPES = [Array, String, Boolean, Object, Function]

/**
 * capitalize('fooBar'); // 'FooBar'
 * capitalize('fooBar', true); // 'Foobar'
 */
export function capitalize([first, ...rest], lowerRest = false) {
  return first.toUpperCase() + (lowerRest ? rest.join('').toLowerCase() : rest.join(''))
}

/**
 * 给选项对象的字段名称增加前缀
 * @param name
 * @param options
 *
 * @example
 * stroke: {color: 'red'} => {strokeColor: 'red'}
 */
export function prefix(name, options) {
  let result = {}
  Object.keys(options).forEach(key => {
    const fixName = name + capitalize(key)
    result[fixName] = options[key]
  })
  return result
}

/**
 * 选项对象增加前缀后对应关系
 * @param name
 * @param options
 *
 * @example
 * stroke: {color: 'red'} => {color：'strokeColor'}
 */
export function keyMap(name, options) {
  let result = {}
  Object.keys(options).forEach(key => {
    result[key] = name + capitalize(key)
  })
  return result
}

/**
 * 混合组件，生成Style描述JSON
 * @param {VueComponent} mv vue组件实例
 * @param name
 * @param options
 */
export function mix(mv, name, options) {
  let result = {}
  let map = keyMap(name, options)
  Object.keys(options).forEach(key => {
    result[key] = mv[map[key]]
  })
  return result
}

/**
 * 图形生成style, 依赖baseStyleRender、strokeRender、textRender
 * @return {*}
 */
export function featureStyleRender() {
  return parse({
    ...this.baseStyleRender(),
    fill: {
      className: 'Fill',
      color: this.fill
    },
    stroke: this.strokeRender(),
    text: this.textRender()
  })
}

/**
 * 合并组件的props
 * @return {any}
 */
export function mixProps() {
  const propsArray = Array.from(arguments).map(item => item.props || {})
  const props = Object.assign({}, ...propsArray)
  const fixedProps = Object.create(null)
  Object.entries(props).forEach(item => {
    const key = item[0]
    fixedProps[key] = BASE_TYPES.includes(item[1]) ? {type: item[1]} : item[1]
  })
  return fixedProps
}

/**
 * 获取组件的父级的地图组件
 * @return {*|Vue}
 */
export function getParent() {
  let parent = this.$parent
  while (parent &amp;&amp; !parent.isMap) {
    parent = parent.$parent
  }
  return parent
}

/**
 * 地图初始化完成回调
 * @param callback
 */
export function mapReady(callback) {
  // 先检查父组件的地图是否初始化完成
  if (this.parent &amp;&amp; this.parent.map) {
    callback(this.parent.map, this.parent)
    return
  }
  // 父组件地图未初始化，侦听完成事件
  this.parent.$once('ready', (map, vm) => {
    callback(map, vm)
  })
}

/**
 * 计算两经纬度坐标点距离，
 * @param {Array} coor1 标准经纬度坐标数组,如：[113.38585096783513, 22.96213834599851]；
 * @param {Array} coor2 标准经纬度坐标数组,如：[113.38585096783513, 22.96213834599851]；
 * @return {Number} 返回距离，单位为米；
 */
export function getDistance(coor1, coor2) {
  return Sphere.getDistance(coor1, coor2)
}

/*
 * 计算当前地图 1px 相当于 多少 m 距离
*/
export function getScale(map, mapComp) {
  let mapWidth = mapComp.$el.offsetWidth
  let view = map.getView()
  let extent = view.calculateExtent() 
  let bottomLeft = Extent.getBottomLeft(extent)
  let bottomRight = Extent.getBottomRight(extent)
  let distance = Sphere.getDistance(bottomLeft, bottomRight)
  let unit = distance / mapWidth
  return unit
}

 
const _clot = function(points, distance, arr = [], prop = 'position') {
  let _points = points.concat()
  let first = _points.splice(0, 1)[0]
  let _arr = [first]
  let isCoor = Array.isArray(first)
  
  if (!isCoor &amp;&amp; (!prop || prop &amp;&amp; !first[prop])) return []
  if (!isCoor &amp;&amp; !Array.isArray(first[prop])) return []
  if (_points.length) {
    for (let index = 0; index &lt; _points.length; index++) {
      let dis = isCoor ? Sphere.getDistance(first, _points[index]) : Sphere.getDistance(first[prop], _points[index][prop])
      if (dis &lt;= distance) {
        _arr.push(_points.splice(index, 1)[0])
      }
    }
  }
  arr.push(_arr)
  if (_points.length) {
    _clot(_points, distance, arr)
  }
}
export const pointClot = function(points, distance, prop) {
  let arr = []
  _clot(points, distance, arr, prop)
  return arr.map((item) => {

    let area = Extent.boundingExtent(item.map((p) => { return Array.isArray(p) ? p : p[prop] }))
    let center = Extent.getCenter(area)
    return {
      center: center,
      area: area,
      detailShow: false,
      points: item
    }
  })
}

export const svgToImg = function(fontClass, size, color, fontFamily = 'IconFont') {
  let canvas = document.createElement('CANVAS')
  canvas.width = size
  canvas.height = size
  let ctx = canvas.getContext('2d')

  let span = document.createElement('SPAN')
  span.className = fontClass
  document.body.appendChild(span) 
  let content = window.getComputedStyle(span, '::before').content

  ctx.fillStyle = color;
  ctx.font = `${size - 2}px ${fontFamily}`;

  ctx.textAlign = 'center'
  ctx.fillText(content, size / 2, size - 4);
  let img = canvas.toDataURL('base64')
  document.body.removeChild(span)
  return img
}

export const olExtent = Extent

export const olSphere = Sphere

// --------------曲线点生成函数-----------------
// 阶乘
const factorial = function (num) {
  if (num &lt;= 1) {
      return 1;
  } else {
      return num * factorial(num - 1);
  }
}

/*
 * 生成贝塞尔曲线插值点
 * @para n {number} 控制点数量
 * @para arrPoints {array} 控制点坐标集合
 */ 
export const createBezierCurvePoints = function (n, arrPoints) {
  var Ptx = 0;
  var Pty = 0;

  var arrbline = [];
  for (var t = 0; t &lt; 1; t = t + 0.01) {
    Ptx = 0;
    Pty = 0;
    for (var i = 0; i &lt;= n; i++) {
      Ptx += (factorial(n) / (factorial(i) * factorial(n - i))) * Math.pow((1 - t), n - i) * Math.pow(t, i) * arrPoints[i][0];
      Pty += (factorial(n) / (factorial(i) * factorial(n - i))) * Math.pow((1 - t), n - i) * Math.pow(t, i) * arrPoints[i][1];
    }

    arrbline.push([Ptx, Pty]);
  }
  return arrbline;
} 

export const createCurve = function (start, end, dir) {
  let centerLon = start[0] + (end[0] - start[0]) / 2
  let centerLat = start[1] + (end[1] - start[1]) / 2
  let newCenterLon, newCenterLat
  if (end[0] - start[0] === 0) {
    newCenterLon = centerLon + dir
    newCenterLat = centerLat
  } else if (end[1] - start[1] === 0) {
    newCenterLon = centerLon
    newCenterLat = centerLat + dir
  } else if (end[1] - start[1] === end[0] - start[0] || end[0] - start[0] === end[1] - start[1]) {
    newCenterLon = centerLon + dir
    newCenterLat = centerLat - dir
  } else {
    newCenterLon = centerLon + dir
    newCenterLat = centerLat + dir
  } 
  let newCenter = [newCenterLon, newCenterLat]
  // console.log('line', [start, newCenter, end], centerLon, centerLat)
  return createBezierCurvePoints(2, [start, newCenter, end]) 
}
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-xdh-map.html">xdh-map</a></li><li><a href="module-xdh-map-circle.html">xdh-map-circle</a></li><li><a href="module-xdh-map-dialog.html">xdh-map-dialog</a></li><li><a href="module-xdh-map-draw.html">xdh-map-draw</a></li><li><a href="module-xdh-map-draw-arc.html">xdh-map-draw-arc</a></li><li><a href="module-xdh-map-draw-panel.html">xdh-map-draw-panel</a></li><li><a href="module-xdh-map-drawdown.html">xdh-map-drawdown</a></li><li><a href="module-xdh-map-echarts.html">xdh-map-echarts</a></li><li><a href="module-xdh-map-geo-layer.html">xdh-map-geo-layer</a></li><li><a href="module-xdh-map-group.html">xdh-map-group</a></li><li><a href="module-xdh-map-heat.html">xdh-map-heat</a></li><li><a href="module-xdh-map-html.html">xdh-map-html</a></li><li><a href="module-xdh-map-icon.html">xdh-map-icon</a></li><li><a href="module-xdh-map-image.html">xdh-map-image</a></li><li><a href="module-xdh-map-line.html">xdh-map-line</a></li><li><a href="module-xdh-map-mask.html">xdh-map-mask</a></li><li><a href="module-xdh-map-measure.html">xdh-map-measure</a></li><li><a href="module-xdh-map-overview.html">xdh-map-overview</a></li><li><a href="module-xdh-map-panel.html">xdh-map-panel</a></li><li><a href="module-xdh-map-placement.html">xdh-map-placement</a></li><li><a href="module-xdh-map-pointer.html">xdh-map-pointer</a></li><li><a href="module-xdh-map-polygon.html">xdh-map-polygon</a></li><li><a href="module-xdh-map-popup.html">xdh-map-popup</a></li><li><a href="module-xdh-map-rectangle.html">xdh-map-rectangle</a></li><li><a href="module-xdh-map-scatter.html">xdh-map-scatter</a></li><li><a href="module-xdh-map-text.html">xdh-map-text</a></li><li><a href="module-xdh-map-track.html">xdh-map-track</a></li><li><a href="module-xdh-map-type.html">xdh-map-type</a></li><li><a href="module-xdh-map-warp.html">xdh-map-warp</a></li><li><a href="module-xdh-map-zoom.html">xdh-map-zoom</a></li><li><a href="module-xdh-map-zoom-panel.html">xdh-map-zoom-panel</a></li></ul><h3>Classes</h3><ul><li><a href="ol.interaction.areaSelect.html">areaSelect</a></li><li><a href="ol.interaction.drag.html">drag</a></li><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-map-type.html#~event:change">change</a></li><li><a href="module-xdh-map.html#~event:changeType">changeType</a></li><li><a href="module-xdh-map-pointer.html#~event:copy">copy</a></li><li><a href="module-xdh-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-xdh-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-xdh-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-xdh-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="module-xdh-map-geo-layer.html#~event:mouseEnter">mouseEnter</a></li><li><a href="module-xdh-map-track.html#~event:move">move</a></li><li><a href="global.html#event:on-boxEnd">on-boxEnd</a></li><li><a href="global.html#event:on-boxStart">on-boxStart</a></li><li><a href="global.html#event:on-dragDown">on-dragDown</a></li><li><a href="global.html#event:on-dragMove">on-dragMove</a></li><li><a href="global.html#event:on-dragUp">on-dragUp</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw">on-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw-end">on-draw-end</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-edit-start">on-edit-start</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-draw">on-finish-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-edit">on-finish-edit</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-inited">on-inited</a></li><li><a href="module-xdh-map-measure.html#~event:on-measureEnd">on-measureEnd</a></li><li><a href="module-xdh-map-drawdown.html#~event:on-toggle">on-toggle</a></li><li><a href="module-xdh-map.html#~event:ready">ready</a></li><li><a href="module-xdh-map-track.html#~event:start">start</a></li><li><a href="module-xdh-map-track.html#~event:stop">stop</a></li></ul><h3>Global</h3><ul><li><a href="global.html#bd09ToGcj02">bd09ToGcj02</a></li><li><a href="global.html#bd09ToGps84">bd09ToGps84</a></li><li><a href="global.html#bd09ToWgs84">bd09ToWgs84</a></li><li><a href="global.html#capitalize">capitalize</a></li><li><a href="global.html#convertToWgs84">convertToWgs84</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#D2R">D2R</a></li><li><a href="global.html#featureStyleRender">featureStyleRender</a></li><li><a href="global.html#gcj02ToBd09">gcj02ToBd09</a></li><li><a href="global.html#gcj02ToWgs84">gcj02ToWgs84</a></li><li><a href="global.html#gcjToGps84">gcjToGps84</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getDistance">getDistance</a></li><li><a href="global.html#getParent">getParent</a></li><li><a href="global.html#gps84ToGcj02">gps84ToGcj02</a></li><li><a href="global.html#keyMap">keyMap</a></li><li><a href="global.html#LAYERS">LAYERS</a></li><li><a href="global.html#mapReady">mapReady</a></li><li><a href="global.html#mix">mix</a></li><li><a href="global.html#mixProps">mixProps</a></li><li><a href="global.html#options">options</a></li><li><a href="global.html#outOfChina">outOfChina</a></li><li><a href="global.html#pi">pi</a></li><li><a href="global.html#prefix">prefix</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#StyleMap">StyleMap</a></li><li><a href="global.html#wgs84ToBd09">wgs84ToBd09</a></li><li><a href="global.html#wgs84ToGcj02">wgs84ToGcj02</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Sat Mar 21 2020 16:40:44 GMT+0800 (GMT+08:00)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
